/*
 * @Author: jiu yin
 * @Date: 2024-05-07 14:09:35
 * @LastEditTime: 2024-06-06 15:22:38
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \studio-web-admin\src\view\scene_member_code\component\admission_modal.tsx
 * jiu
 */
import { useState, useRef } from "react";
import Modal_edit from "@/comment/modal_edit";
import { ProTable, ProFormText } from "@ant-design/pro-components";
import type { ActionType } from "@ant-design/pro-components";
import { ConfigProvider, message, Input } from "antd";
import User_avatar from "@/comment/user_avatar";

import { list_ticket, add_ticket_in } from "@/api/home";
import "./index.scss";
import { parseTime } from "@/utils";

export default function PicoList(props: any) {
	let { isModalOpen, detail_item } = props;

	const actionRef = useRef<ActionType>(null);
	const [radio_value, set_radio_value] = useState();
	const columns = [
		{
			dataIndex: "index",
			valueType: "indexBorder",
			width: 48,
		},
		{
			title: "入场票/出票时间",
			dataIndex: "nickname",
			hideInSearch: true,
			render: (_: any, item: any) => (
				<div className=" text-14px">
					<p className="c-#9e9fb0">
						入场票：<span className="c-#323557">{item.ticket_no}</span>
					</p>
					<p className="c-#9e9fb0">
						订单号：<span className="c-#323557">{item.order_no}</span>
					</p>
					<p className="c-#9e9fb0">
						出票时间<span className="c-#323557">{parseTime(item.settled_time)}</span>
					</p>
				</div>
			),
		},
		{
			title: "角色昵称",
			dataIndex: "char_name",
			hideInSearch: true,
		},
		{
			title: "角色性别",
			dataIndex: "nickname",
			hideInSearch: true,
			render: (_: any, item: any) => (
				<span>{item.visualize_gender == "F" ? "女" : item.visualize_gender == "M" ? "男" : "_"}</span>
			),
		},
		{
			title: "角色数字人",
			dataIndex: "nickname",
			hideInSearch: true,
			render: (_: any, item: any) => (
				<div>
					{item.is_npc == 1 && (
						<User_avatar
							options={{
								avatar_url: item.avatar_url,
								nickname: item.nickname,
								id: item.user_id,
							}}
						/>
					)}
					{item.is_npc == 2 && "系统NPC"}
				</div>
			),
		},
	];
	let [params, set_params] = useState({ keyword: "" });
	const handleOk = async () => {
		if (!radio_value) return message.error("请选择入场票");
		let params = { program_id: detail_item.program_id, member_id: detail_item.member_id, ticket_no: radio_value };
		await add_ticket_in(params);
		message.success("关联入场票成功");
		isModalOpen[1](false);
		props.reload();
	};

	return (
		<Modal_edit title="手动关联入场票" width={800} isModalOpen={isModalOpen} handleOk={handleOk}>
			<div>
				<div className="mt-50px">
					<div className="flex justify-center mb-20px">
						<input
							placeholder="     搜索入场票编号/enter"
							onKeyDown={(e: any) => {
								if (e.code == "Enter") {
									set_params({ ...params, keyword: e.target.value });
								}
							}}
							className="custom_input"
						/>
					</div>

					<ConfigProvider>
						<ProTable
							columns={columns}
							actionRef={actionRef}
							params={params}
							request={async (params, sort, filter) => {
								let { data } = await list_ticket({
									page: params.current,
									limit: params.pageSize,
									status: 3,
									...params,
								});
								data.data.forEach((item: any, index: number) => (item.key = index + 1));
								return {
									data: data.data,
									success: true,
									total: data.total,
								};
							}}
							rowKey="key"
							rowSelection={{
								type: "radio",
								onSelect: record => {
									console.log(record);
									set_radio_value(record.ticket_no);
								},
							}}
							tableAlertRender={false}
							search={false}
							options={false}
							pagination={{
								pageSize: 100,
								hideOnSinglePage: true,
							}}
							dateFormatter="string"
						/>
					</ConfigProvider>
				</div>
			</div>
		</Modal_edit>
	);
}
